<template>
    <div>
        <p class="title">登录</p>
        <van-form>
            <van-field
                    v-model="phone"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';
import { mapMutations } from 'vuex';
import { getUserDetail } from '../request/api/home';
    export default {
        name: "Login",
        data() {
            return {
                phone: '',
                password: '',
            };
        },
        methods: {
            // onSubmit() {
            //     /*console.log('submit', values);*/
            //     if(this.username=="123456"&&this.password=="123456"){
            //         Toast.success('登录成功');
            //     }
            //     else if(this.username==""&&this.password==""){
            //         Toast('请输入账号或密码');
            //     }
            //     else{
            //         Toast.fail('账号或密码错误');
            //     }
            // },
            // toRegister(){
            //     this.$router.push('/Register')
            // }
            async onSubmit(){
                let res = await this.$store.dispatch('getLogin',{phone:this.phone,password:this.password})
                console.log(res);
                if(res.data.code === 200){
                    Toast.success('登录成功')
                    this.updateIsLogin(true)
                    // 登录成功获取用户详情信息
                    let result = await getUserDetail(res.data.account.id)
                    console.log(result);
                    // 把令牌存到本地存储中
                    localStorage.setItem("token",JSON.stringify(res.data.token))
                    this.$router.replace('/mineview')
                }else{
                    Toast('手机密码错误')
                    this.password = ''
                }
            },
            ...mapMutations(['updateIsLogin'])
            
        }
    }

</script>

<style scoped>
    .title {
        /* border-radius: 15px; */
        size:1px;
        height: 50px;
        line-height: 50px;
        background-color: #a06;
        color: #fff;
        text-align: center;
    }

</style>

